<template>
  <DraggableModal
    :visible="props.showModal"
    title="设备信息"
    width="900px"
    :maskClosable="true"
    @cancel="modalCancelFn"
  >
    <SuperTable
      ref="superTableRef"
      :search="false"
      pager
      border
      align="center"
      :show-card-header="false"
      :columns="columns"
      :data-request="fetchData"
      :export-config="{}"
      :toolbar="{}"
    />
    <template #footer><Button @click="modalCancelFn">关闭</Button> </template>
  </DraggableModal>
</template>

<script setup lang="ts">
import SuperTable from '@/framework/components/core/super-table/super-table.vue';
import { TableColumn } from '@/framework/components/core/super-table';
import { VxeGridPropTypes } from 'vxe-table';
import { getThirdDevice } from '@/modules/system-docking/api/tripartite-system';
import { reactive, ref, watch } from 'vue';
import { DraggableModal } from '@/framework/components/core/draggable-modal';
import Button from '@/framework/components/basic/button/button.vue';

/**
 * const
 */
const props = withDefaults(
  defineProps<{
    showModal: boolean;
    data: any;
  }>(),
  {
    showModal: false,
  },
);
watch(
  () => props.showModal,
  () => {
    if (props.showModal) {
      state.data = props.data;
      refreshTableFn();
    }
  },
);
const emits = defineEmits<{
  (e: 'update:showModal', state: boolean): void;
}>();
const superTableRef = ref<InstanceType<typeof SuperTable>>();

const state: {
  data: any;
} = reactive({
  data: {},
});
/**
 * table
 */
const columns: TableColumn<{ sn; name; model; manufacturer }>[] = [
  {
    title: '设备编号',
    field: 'sn',
  },
  {
    title: '设备名称',
    field: 'name',
  },
  {
    title: '设备类型',
    field: 'model',
  },
  {
    title: '厂家',
    field: 'manufacturer',
  },
];
const fetchData = async (ori: VxeGridPropTypes.ProxyAjaxQueryParams) => {
  let params = {
    pageSize: ori.page.pageSize,
    pageNum: ori.page.currentPage,
    // orderBy: [
    //   {
    //     field: 'createTime',
    //     order: 'desc',
    //   },
    // ],
    systemId: props.data.id,
  };
  let res = await getThirdDevice(params);
  return res.result;
  // return {
  //   data: [{}, {}, {}],
  //   pageIndex: 1,
  //   pageSize: 10,
  //   total: 100,
  // };
};
const refreshTableFn = () => {
  superTableRef.value?.refreshTable();
};

/**
 * modal
 */
const modalCancelFn = () => {
  state.data = {};
  emits('update:showModal', false);
};
</script>

<style scoped lang="less"></style>
